<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 50px;
            background-color: white;
            position: relative;
            line-height: 50px;
        }

        .nav-left {
            width: 700px;
            height: 50px;
            position: absolute;
            left: 0px;
            top: 0px;
            text-align: center;
        }

        .nav-right {
            width: 200px;
            height: 50px;
            position: absolute;
            right: 0px;
            top: 0px;
        }

        .nav ul {
            overflow: hidden;
        }

        .nav li {
            list-style: none;
            width: 70px;
            text-align: center;
            float: left;
        }

        .nav-right button {
            border-radius: 5px;
            width: 50px;
            height: 25px;
            background-color: blue;
            border: 1px solid #fff;
        }

        .nav-right a {
            color: white;
            text-decoration: none;
        }

        .nav-left a {
            text-decoration: none;
            color: black;
        }

        .logo {
            display: block;
            margin: auto;
            width: 400px;
        }

        .ss {
            width: 700px;
            height: 40px;
            margin: auto;
            overflow: hidden;
            border: 1px solid #888;
            border-radius: 10px;
            position: relative;
        }

        input,
        button {
            outline: none;
        }

        input {
            width: 590px;
            height: 40px;
            position: absolute;
            top: 0;
            left: 0;
            border: 0;
            background: #fff url(images/xj.PNG) no-repeat;
            background-size: 35px;
            background-position-x: right;
            background-position-y: center;
            text-indent:20px;
        }

        .ss button {
            width: 100px;
            height: 40px;
            position: absolute;
            top: 0;
            right: 0;
            border: 0;
            background-color: blue;
        }

        .ss button a{
            text-decoration: none;
            color: white;
            font-weight: bold;
        }

        .rs {
            margin: auto;
            padding-top: 50px;
            width: 700px;
            background-color: white;
            position: relative;
            line-height: 40px;
        }

        .rs-left {
            width: 350px;
            position: absolute;
            left: 0px;
            text-align: left;
        }

        .rs-right {
            width: 350px;
            position: absolute;
            right: 0px;
            text-align: left;
        }

        .rs-right img{
           background-color: #fff;
           position: absolute;
           top: 9px;
           right: 50px;
           text-align: right;
           width: 20px;
        }
        .hyh{
            text-align: right;
            color: #888;
        }

        .one{
            color: red;
        }

        .two{
            color:tomato;
        }

        .three{
            color: orange;
        }
        .re{
            background-color: orange;
            color: white;
            border: 1px solid #fff;
            border-radius: 5px;
        }
        .xin{
            background-color: palevioletred;
            color: white;
            border: 1px solid #fff;
            border-radius: 5px;
        }
        .foot{
            height: 50px;
            background-color: white;
            position: relative;
            bottom: o;
            font-size: 5px;
            color: #888;
            top: 280px;
        }

        .foot-left {
            position: absolute;
            left: 5px;
            bottom: 0px;
            text-align: center;
        }

        .foot-right {
            position: absolute;
            right: 5px;
            bottom: 0px;
        }

        .foot-left ul {
            overflow: hidden;
        }

        .foot-left li{
            list-style: none;
            text-align: center;
            float: left;
            width: 85px;
        }

        .ewm{
            position: fixed;
            right: 50px;
            bottom: 80px;
            width: 20px;
       
       
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="nav-left">
            <ul>
                <li><a href="#">新闻</a></li>
                <li><a href="#">hao123</a></li>
                <li><a href="#">地图</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">贴吧</a></li>
                <li><a href="#">学术</a></li>
                <li><a href="#">更多</a></li>
            </ul>
        </div>
        <div class="nav-right">
            <ul>
                <li>设置</li>
                <li><button><a href="#">登录</a></button></li>
            </ul>
        </div>
    </div>
    <img src="images/logo.png" class="logo">
    <div class="ss">
        <input type="text" width="700px" height="60px">
        <button><a href="http:www.baidu.com">百度一下</a></button>
    </div>
    <div class="rs">
        <div class="rs-left">
            <p><b>百度热榜</b></p>
            <p><strong class="one">1</strong>&nbsp;新冠病毒可在手机屏上存活一个月&nbsp;<strong class="re">热</strong></p>
            <p><strong class="two">2</strong>&nbsp;青岛新增9例核酸检测阳性病例</p>
            <p><strong class="three">3</strong>&nbsp;国家卫健委派工作组赴青岛&nbsp;<strong class="xin">新</strong></p>
        </div>
        <div class="rs-right">
            <img src="images/hyh.PNG">
            <p class="hyh">换一换</p>
            <p><strong>4</strong>&nbsp;国内第四大运营商中国广电成立</p>
            <p><strong>5</strong>&nbsp;湖人捧起总冠军奖杯致敬科比</p>
            <p><strong>6</strong>&nbsp;四川营救坠江女孩失联民警牺牲</p>
        </div>
    </div>
    <div class="foot">
        <div class="foot-left">
            <ul>
                <li>设为首页</li>
                <li>关于百度</li>
                <li>About Baidu</li>
                <li>百度营销</li>
                <li>使用百度前必读</li>
                <li>意见反馈</li>
                <li>帮助中心</li>
                <li>有奖问卷</li>
            </ul>
        </div>
        <div class="foot-right">
            <p>&copy;2020 Baidu&nbsp;&nbsp;&nbsp;&nbsp;(京)-经营性-2017-0020&nbsp;&nbsp;&nbsp;&nbsp;京公网安备11000002000001号&nbsp;&nbsp;&nbsp;&nbsp;京ICP证030173号</p>
        </div>
    </div>
    <img src="images/ewm.PNG" class="ewm">

</body>

</html>